<template>
    <view>
        <view class="content">
            <view class="content_line">
                <view class="content_line_first">
                    <view class="content_lt_view"></view>
                    <view class="content_rt_view"></view>
                </view>

                <view class="context_view">
                    <!-- <image class="img_suancaishen" src="../static/suancaishen.png" mode="aspectFit"></image> -->
                    <image class="img_slogin" src="../static/slogin.png" mode="aspectFit"></image>

                    <view style="display: flex;font-size: 28rpx;color: #D45151;width: 80%;margin-top: 40rpx;">
                        <open-data
                            class="user-avatar"
                            type="userAvatarUrl"
                            style="width: 108rpx;height: 108rpx;border-radius: 50%;background-color: #e6dcc8;"
                        ></open-data>

                        <!-- <image
							:src="myThisUserInfo.wxPortrait"
							
						></image> -->
                        <view style="display: flex;flex-direction: column;justify-content: space-between;margin-bottom: 10rpx;margin-left: 44rpx;">
                            <!-- <text>{{ myThisUserInfo.wxName }}</text> -->
                            <open-data class="user-name" type="userNickName"></open-data>
                            <view>
                                <text>{{ myThisUserInfo.wxGender > 0 ? (myThisUserInfo.wxGender == 1 ? '男' : '女') : '未知' }}</text>
                                <text style="margin-left: 40rpx;">中国 · {{ myThisUserInfo.wxProvince }} · {{ myThisUserInfo.wxCity }}</text>
                                <text>ID : {{ myThisUserInfo.id }}</text>
                            </view>
                        </view>
                    </view>

                    <view style="width: 90%;height: 2rpx;background: #9F9E9C;margin-top: 16rpx;"></view>

                    <view style="width: 80%; font-size: 28rpx; color: #6D6D6D; margin-top: 13rpx;">
                        <image src="../static/birthday_logo.png" style="width: 36rpx;height: 34rpx;" mode="aspectFit"></image>
                        <text style="margin-left: 15rpx;">生辰：{{ myThisUserInfo.birthday }}</text>
                    </view>
                    <view style="width: 80%; font-size: 28rpx; color: #6D6D6D; margin-top: 5rpx;">
                        <image src="../static/my_s.png" style="width: 35rpx;height: 34rpx;" mode="aspectFit"></image>
                        <text style="margin-left: 15rpx;">八字：{{ myThisUserInfo.bazi }}</text>
                    </view>

                    <view style="margin-top: 30rpx; display: flex;justify-content: space-between;width: 80%;font-size: 28rpx; color: #6D6D6D;">
                        <view style="display: flex;flex-direction: column;align-items: center;">
                            <image :src="wuxingUrl" style="width: 60rpx;height: 60rpx;"></image>
                            <text style="margin-top: 15rpx;">五行{{ myThisUserInfo.wuxing }}</text>
                        </view>
                        <view style="display: flex;flex-direction: column;align-items: center;">
                            <image :src="shengxiaoUrl" style="width: 60rpx;height: 60rpx;"></image>
                            <text style="margin-top: 15rpx;">生肖{{ myThisUserInfo.shengxiao }}</text>
                        </view>
                        <view style="display: flex;flex-direction: column;align-items: center;">
                            <image :src="xingzuoUrl" style="width: 60rpx;height: 60rpx;"></image>
                            <text style="margin-top: 15rpx;">{{ myThisUserInfo.xingzuo }}</text>
                        </view>
                    </view>

                    <view style="width: 90%;height: 2rpx;background: #9F9E9C;margin-top: 25rpx;"></view>

                    <view style="width: 90%; margin-top: 15rpx;" v-if="ifopv">
                        <text style="font-size: 24rpx; color: #6D6D6D;">随时随地测运势</text>
                        <view style="display: flex;justify-content: space-between;width: 100%;margin-top: 30rpx;">
                            <view
                                @click="slectPayStyle(5)"
                                :class="ifPayButton == 5 ? 'payButtomSlectY' : 'payButtomSlectN'"
                                style="width: 150rpx;height: 180rpx;
							display: flex;flex-direction: column;justify-content: space-between; align-items: center;
							border-radius: 6rpx;"
                            >
                                <text style="font-size: 22rpx;color: #545454;margin-top: 15rpx;">两小时算</text>
                                <text style="font-size: 40rpx;color: #D45151;">￥0.99</text>
                                <text style="font-size: 20rpx;color: #979797;margin-bottom: 15rpx;">2小时有效</text>
                            </view>
                            <view
                                @click="slectPayStyle(1)"
                                :class="ifPayButton == 1 ? 'payButtomSlectY' : 'payButtomSlectN'"
                                style="width: 150rpx;height: 180rpx;
							display: flex;flex-direction: column;justify-content: space-between; align-items: center;
							border-radius: 6rpx;"
                            >
                                <text style="font-size: 22rpx;color: #545454;margin-top: 15rpx;">单日算</text>
                                <text style="font-size: 40rpx;color: #D45151;">￥5.18</text>
                                <text style="font-size: 20rpx;color: #979797;margin-bottom: 15rpx;">24小时有效</text>
                            </view>
                            <view
                                @click="slectPayStyle(3)"
                                :class="ifPayButton == 3 ? 'payButtomSlectY' : 'payButtomSlectN'"
                                style="width: 150rpx;height: 180rpx;
							display: flex;flex-direction: column;justify-content: space-between; align-items: center;
							border-radius: 6rpx;"
                            >
                                <text style="font-size: 22rpx;color: #545454;margin-top: 15rpx;">月月算</text>
                                <text style="font-size: 40rpx;color: #D45151;">￥88</text>
                                <text style="font-size: 20rpx;color: #979797;margin-bottom: 15rpx;">￥2.93元/天</text>
                            </view>
                        </view>
                    </view>
                    <image
                        v-if="ifopv"
                        @click="payVip()"
                        src="../static/pay_button.png"
                        mode="aspectFit"
                        style="width: 452rpx;height: 71rpx;margin-top: 50rpx;"
                    ></image>
                </view>

                <view class="content_line_last">
                    <view class="content_lb_view"></view>
                    <view class="content_rb_view"></view>
                </view>
            </view>
        </view>

        <view
            style="width: 100%;height: 240rpx + 120rpx; display: flex;flex-direction: column; justify-content: center;align-items: center;background: url(https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/back_botton_my.png);background-size: cover;background-repeat: no-repeat;"
        >
            <image
                src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/%E4%BD%99%E9%A2%9D%E6%B5%81%E6%B0%B4.png"
                mode="aspectFit"
                @click="goToBalance"
                style="width: 428rpx;height: 80rpx;"
            ></image>
            <image
                src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/%E6%88%91%E7%9A%84%E5%A5%BD%E5%8F%8B.png"
                mode="aspectFit"
                @click="goToMyFriend"
                style="width: 428rpx;height: 80rpx;margin-top: 30rpx;"
            ></image>
            <image
                src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/%E6%B8%A0%E9%81%93%E8%AE%BE%E7%BD%AE.png"
                mode="aspectFit"
                @click="click"
                style="width: 428rpx;height: 80rpx;margin-top: 30rpx;"
            ></image>
        </view>

        <!-- <view style="width: 100%;height: 240rpx;">
			<image src="../static/back_botton_my.png" mode="aspectFit" style="width: 100%;height: 100%;position: absolute;left: 0rpx;top: 0rpx;"></image>
			<image src="../static/money.png" mode="aspectFit" style="width: 428rpx;height: 80rpx;"></image>
			<image src="../static/myfriend.png" mode="aspectFit" style="width: 428rpx;height: 80rpx;margin-top: 30rpx;"></image>
		</view> -->
        <shopro-modal v-model="showModal" style="z-index: 88;" v-if="showModal">
            <block slot="modalContent">
                <view class="modal-box">
                    <view class="modal-head">
                        <image class="modal-head-img" src="http://shopro.7wpp.com/imgs/modal_bg.png" mode=""></image>
                        <text class="modal-head-title">渠道设置</text>
                    </view>
                    <input class="inp" type="number" v-model="channel" placeholder="渠道ID" placeholder-class="pl-inp" />
                    <input class="inp" type="text" v-model="channelPwd" placeholder="渠道密码" placeholder-class="pl-inp" />

                    <button class="cu-btn post-btn" @tap="name">确认</button>
                </view>
            </block>
        </shopro-modal>
        <uni-popup ref="vipshare" type="vipshare"><vipshare @shareVip="shareVip" @closevipshare="closevipshare"></vipshare></uni-popup>
    </view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
import vipshare from '@/components/uni-popup/vipshare.vue';
import helper from '../common/helper.js';
import shoproModal from '@/components/shopro-modal/shopro-modal.vue';
export default {
    components: {
        uniPopup,
        uniPopupMessage,
        uniPopupDialog,
        vipshare,
        shoproModal,
    },
    data() {
        return {
            channel: '', // 渠道ID
            channelPwd: '', // 渠道密码
            ifopv: 0,
            showModal: false,
            myThisUserInfo: {
                id: '',
                wxName: '',
                wxPortrait: '',
                wxProvince: '',
                wxCity: '',
                wxGender: '',
                bazi: '',
                wuxing: '',
                shengxiao: '',
                xingzuo: '',
                birthday: '',
            },
            xingzuoUrl: 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/xingzuo/moren.png',
            shengxiaoUrl: 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/shengxiao/moren.png',
            wuxingUrl: 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/wuxing/moren.png',
            ifPayButton: 5,
        };
    },
    onLoad(options) {
        if (helper.commentUserId == null || helper.commentUserId == '' || helper.commentUserId == undefined || helper.commentUserId == 'undefined') {
            helper.commentUserId = options.commentUserId;
        }

        // this.getTokenAndUserInfo();
    },
    onShow() {
        //每次显示该页面都重新获取数据
        this.getTokenAndUserInfo();
    },
    onShareAppMessage: function(res) {
        console.log('myid=' + helper.myUserInfo.id);
        if (res.from === 'button') {
            // 来自页面内转发按钮
        }
        return {
            title: '来测一测今日财神方位！',
            path: 'pages/homePage?commentUserId=' + helper.myUserInfo.id,
        };
    },
    methods: {
        async name() {
            if ([this.channel, this.channelPwd].includes('')) {
                return uni.showToast({
                    title: '请填写完整~~',
                    icon: 'none',
                });
            }
            uni.request({
                url: helper.websiteUrl + '/api/v1/setAgentToUser',
                method: 'GET',
                header: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    Authorization: helper.myToken,
                },
                data: {
                    agentId: this.channel, // 渠道ID
                    password: this.channelPwd, //密码
                },
                success: res => {
                    console.log('res :>> ', res);
                    uni.showToast({
                        title: res.data.message,
                        icon: 'none',
                    });
                    [this.channel, this.channelPwd] = ['', ''];
                },
            });
        },
        async confirm() {
            console.log('111 :>> ', 111);
        },
        async click() {
            console.log('this.showModal :>> ', this.showModal);
            this.showModal = true;
            console.log('this.showModal :>> ', this.showModal);
        },
        getTokenAndUserInfo() {
            //把this存到这里，不然异步请求拿不到，后续用that代替this
            let that = this;
            uni.getStorage({
                key: 'token',
                success(storageRes) {
                    console.log(helper.websiteUrl + '/api/v1/testToken');
                    helper.myToken = storageRes.data;
                    uni.request({
                        url: helper.websiteUrl + '/api/v1/testToken',
                        method: 'GET',
                        header: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                            Authorization: helper.myToken,
                        },
                        success: res => {
                            if (res.data.code == 200) {
                                console.log('验证成功，token有效');
                                that.ifopv = res.data.data.ifopv;
                                helper.ifopv = res.data.data.ifopv;
                                //把返回的用户信息存到全局变量
                                helper.myUserInfo = res.data.data.userInfo;
                                //渲染页面数据
                                that.myThisUserInfo = helper.myUserInfo;
                                //将八字按前端页面要显示的方式处理一下
                                let baziStr = (that.myThisUserInfo.bazi =
                                    that.myThisUserInfo.bazi.slice(0, 2) +
                                    ' ' +
                                    that.myThisUserInfo.bazi.slice(2, 4) +
                                    ' ' +
                                    that.myThisUserInfo.bazi.slice(4, 6) +
                                    ' ' +
                                    that.myThisUserInfo.bazi.slice(6, 8));
                                that.myThisUserInfo.bazi = baziStr;

                                //处理星座图片
                                switch (helper.myUserInfo.xingzuo) {
                                    case '白羊座':
                                        that.xingzuoUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/xingzuo/' + 'baiyang.png';
                                        break;
                                    case '处女座':
                                        that.xingzuoUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/xingzuo/' + 'chunv.png';
                                        break;
                                    case '金牛座':
                                        that.xingzuoUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/xingzuo/' + 'jinniu.png';
                                        break;
                                    case '巨蟹座':
                                        that.xingzuoUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/xingzuo/' + 'juxie.png';
                                        break;
                                    case '摩羯座':
                                        that.xingzuoUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/xingzuo/' + 'mojie.png';
                                        break;
                                    case '射手座':
                                        that.xingzuoUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/xingzuo/' + 'sheshou.png';
                                        break;
                                    case '狮子座':
                                        that.xingzuoUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/xingzuo/' + 'shizi.png';
                                        break;
                                    case '双鱼座':
                                        that.xingzuoUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/xingzuo/' + 'shuangyu.png';
                                        break;
                                    case '双子座':
                                        that.xingzuoUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/xingzuo/' + 'shuangzi.png';
                                        break;
                                    case '水瓶座':
                                        that.xingzuoUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/xingzuo/' + 'shuiping.png';
                                        break;
                                    case '天秤座':
                                        that.xingzuoUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/xingzuo/' + 'tiancheng.png';
                                        break;
                                    case '天蝎座':
                                        that.xingzuoUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/xingzuo/' + 'tianxie.png';
                                        break;
                                }

                                //处理生肖图片
                                switch (helper.myUserInfo.shengxiao) {
                                    case '狗':
                                        that.shengxiaoUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/shengxiao/' + 'gou.png';
                                        break;
                                    case '猴':
                                        that.shengxiaoUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/shengxiao/' + 'hou.png';
                                        break;
                                    case '虎':
                                        that.shengxiaoUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/shengxiao/' + 'hu.png';
                                        break;
                                    case '鸡':
                                        that.shengxiaoUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/shengxiao/' + 'ji.png';
                                        break;
                                    case '龙':
                                        that.shengxiaoUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/shengxiao/' + 'long.png';
                                        break;
                                    case '马':
                                        that.shengxiaoUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/shengxiao/' + 'ma.png';
                                        break;
                                    case '牛':
                                        that.shengxiaoUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/shengxiao/' + 'niu.png';
                                        break;
                                    case '蛇':
                                        that.shengxiaoUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/shengxiao/' + 'she.png';
                                        break;
                                    case '鼠':
                                        that.shengxiaoUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/shengxiao/' + 'shu.png';
                                        break;
                                    case '兔':
                                        that.shengxiaoUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/shengxiao/' + 'tu.png';
                                        break;
                                    case '羊':
                                        that.shengxiaoUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/shengxiao/' + 'yang.png';
                                        break;
                                    case '猪':
                                        that.shengxiaoUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/shengxiao/' + 'zhu.png';
                                        break;
                                }

                                //处理五行图片
                                switch (helper.myUserInfo.wuxing) {
                                    case '火':
                                        that.wuxingUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/wuxing/' + 'huo.png';
                                        break;
                                    case '金':
                                        that.wuxingUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/wuxing/' + 'jin.png';
                                        break;
                                    case '木':
                                        that.wuxingUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/wuxing/' + 'mu.png';
                                        break;
                                    case '水':
                                        that.wuxingUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/wuxing/' + 'shui.png';
                                        break;
                                    case '土':
                                        that.wuxingUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/wuxing/' + 'tu.png';
                                        break;
                                }
                            } else {
                                console.log('token无效');
                                uni.redirectTo({
                                    url: 'index/index',
                                });
                            }
                        },
                    });
                },
                fail() {
                    console.log('空数据');
                    uni.redirectTo({
                        url: 'index/index',
                    });
                },
            });
        },
        slectPayStyle(elem) {
            this.ifPayButton = elem;
        },
        payVip() {
            uni.showLoading({
                title: '支付中',
            });
            let that = this;
            this.$request
                .post('/pay/payVip', {
                    data: {
                        // timeStyle: this.ifPayButton + 1	//+1因为后台的会员充值是从2开始的，1是单日充值
                        timeStyle: this.ifPayButton,
                    },
                    dataType: 'json',
                    responseType: 'text',
                })
                .then(res => {
                    uni.hideLoading();

                    //支付
                    console.log(res);
                    //后台订单ID
                    let orderId = res.data.data.orderId;
                    //发起支付
                    uni.requestPayment({
                        provider: 'wxpay',
                        timeStamp: res.data.data.wxPayRequest.timeStamp,
                        nonceStr: res.data.data.wxPayRequest.nonceStr,
                        package: res.data.data.wxPayRequest.packageValue,
                        signType: res.data.data.wxPayRequest.signType,
                        paySign: res.data.data.wxPayRequest.paySign,
                        success: function(res) {
                            console.log('success:' + JSON.stringify(res));
                            console.log('orderId=====:' + orderId);
                            that.$refs.vipshare.open();
                        },
                        fail: function(err) {
                            console.log('fail:' + JSON.stringify(err));
                        },
                    });
                })
                .catch(error => {
                    uni.hideLoading();
                    console.log('error:', error);
                });
        },
        openVipShare() {
            this.$refs.vipshare.open();
        },
        shareVip(done) {
            console.log('sharevip');
            done();
            let that = this;
            this.$request
                .post('/pay/addvip', {
                    data: {},
                    dataType: 'json',
                    responseType: 'text',
                })
                .then(res => {
                    console.log('res:', res);
                    uni.showToast({
                        title: res.data.data,
                        icon: 'none',
                    });
                })
                .catch(error => {
                    console.log('error:', error);
                });
        },
        closevipshare(done) {
            console.log('closevipshare');
            done();
        },
        goToBalance() {
            uni.navigateTo({
                url: './balancePage',
            });
        },
        goToMyFriend() {
            uni.navigateTo({
                url: './myFriendPage',
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.modal-box {
    background: #fff;
    width: 610rpx;
    margin: 0 auto;
    border-radius: 20rpx;
    .modal-head-img {
        width: 100%;
        height: 213rpx;
    }

    .modal-head-title {
        font-size: 35rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #6d5028;
        line-height: 42rpx;
    }

    .inp {
        width: 501rpx;
        height: 78rpx;
        border: 1rpx solid rgba(168, 112, 13, 1);
        // margin: 60rpx auto 40rpx;
        margin: 0 auto;
        margin-top: 30rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #6d5028;

        .pl-inp {
            color: #bd9560;
        }
    }

    .radio {
        width: 500rpx;
        padding: 0 50rpx;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(200, 150, 61, 1);
        margin-bottom: 20rpx;

        .radio-inp {
            transform: scale(0.7);
            margin-right: 10rpx;
        }
    }

    .post-btn {
        width: 492rpx;
        height: 70rpx;
        background: #d45151;
        box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
        border-radius: 35rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        padding: 0;
        margin-bottom: 60rpx;
        margin-top: 30rpx;
    }
}
.content {
    width: 100vw;
    height: 100vh;
    border-style: solid;
    border-width: 18rpx;
    border-color: #d45151;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    background: #e6dcc8;
}

.content_line {
    width: 90%;
    height: 100%;
    border-style: solid;
    border-width: 9rpx;
    border-color: #d45151;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.content_line_first {
    display: flex;
    justify-content: space-between;
}

.content_line_last {
    display: flex;
    justify-content: space-between;
}

.content_lt_view {
    width: 34rpx;
    height: 34rpx;
    background: #d45151;
    margin-left: -17rpx;
    margin-top: -17rpx;
}

.content_rt_view {
    width: 34rpx;
    height: 34rpx;
    background: #d45151;
    margin-right: -17rpx;
    margin-top: -17rpx;
}

.content_lb_view {
    width: 34rpx;
    height: 34rpx;
    background: #d45151;
    margin-left: -17rpx;
    margin-bottom: -17rpx;
    align-self: flex-end;
}

.content_rb_view {
    width: 34rpx;
    height: 34rpx;
    background: #d45151;
    margin-right: -17rpx;
    margin-bottom: -17rpx;
    align-self: flex-end;
}

.context_view {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.img_suancaishen {
    width: 410rpx;
    height: 146rpx;
}

.img_slogin {
    width: 634rpx;
    height: 88rpx;
    margin-top: 40rpx;
}

.img_caishen {
    width: 287rpx;
    height: 367rpx;
}

.img_button {
    width: 341rpx;
    height: 86rpx;
    margin-top: 28rpx;
}

.text_bottom {
    font-size: 23rpx;
    color: #a19d99;
}

.payButtomSlectN {
    border-color: #9f9e9c;
    border-width: 3rpx;
    border-style: solid;
}
.payButtomSlectY {
    border-color: #d45151;
    border-width: 3rpx;
    border-style: solid;
}
</style>
